<template>
    <div>
        <el-dialog :title="`${mainText}批量导入`" width="560px" class="batch-import-point" :visible="true" append-to-body :close-on-click-modal="false" @close="handleCloseBatch">
            <div class="import-tips">
                请先下载<span class="import-template" @click="handleGetImportTemplate">{{ mainText }}导入模板</span>，按照模板格式制作后导入
            </div>
            <el-upload
                :action="uploadUrl"
                :before-upload="handleBeforeUpload"
                :file-list="fileList"
                :on-error="handleUploadError"
                :on-success="handleSuccess"
                :show-file-list="false"
                :headers="headers"
                class="upload-template"
                ref="upload"
            >
                <img class="icon-upload" :src="require('@/assets/images/version/icon-import.png')" alt="">
                <div class="upload-tips">点击导入文件</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCloseBatch">取 消</el-button>
                <el-button type="primary" @click="handleBatchImport">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth";
export default {
    props: {
        downloadLink: {
            type: String,
            default: () => '',
            required: true
        },
        mainText: {
            type: String,
            default: () => ''
        },
        uploadLoadLink: {
            type: String,
            default: () => '',
            required: true
        }
    },
    watch: {
        uploadLoadLink: {
            handler(val) {
                this.uploadUrl = this.uploadBaseUrl + val;
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            uploadBaseUrl: process.env.VUE_APP_BASE_API,
            fileList: [],
            headers: {
                Authorization: "Bearer " + getToken(),
            },
            uploadUrl: ''
        }
    },
    methods: {
        handleGetImportTemplate() {
            this.download(this.downloadLink, {}, `${this.mainText}导入模板.xlsx`)
        },
        //导入before
        handleBeforeUpload(file) {
            // 校检文件类型
            if (this.fileType) {
                const fileName = file.name.split('.');
                const fileExt = fileName[fileName.length - 1];
                const isTypeOk = this.fileType.indexOf(fileExt) >= 0;
                if (!isTypeOk) {
                    // this.filesLoading = false;
                    this.$modal.msgError(`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`);
                    return false;
                }
            }
        },
        //导入错误
        handleUploadError() {
            this.$modal.msgError("上传文件失败");
        },
        //导入成功
        handleSuccess(res, file) {
            const msg = res.data;
            if((res.code + '') === '200') {
                this.$modal.msgSuccess(`${this.mainText}批量导入成功~`)
                this.handleBatchImport();
            } else {
                if(this.$_.isObject(msg)) {
                    let result = []
                    this.$_.each(msg, (value, key) => {
                        result.push(`第${key}行.${value}`);
                    })
                    this.$modal.msgError(`${result.join(',')}`)
                } else if (this.$_.isString(msg)) {
                    this.$modal.msgError(`${msg}`)
                } else if (this.$_.isArray(msg)) {
                    this.$modal.msgError(`${msg.join(',')}`)
                }
            }
        },
        //批量导入弹窗关闭
        handleCloseBatch() {
            this.$emit('closeDialog', )
        },
        //批量导入弹窗按钮
        handleBatchImport() {
            this.$emit('batchFinished', )
            this.handleCloseBatch();
        },
    },
    mounted() {
        
    }
};
</script>